<!--  -->
<template>
  <div class="app-search">
    <a-input-search
      class="main-search"
      v-model="_searchWord"
      placeholder="请输入列表中关键字搜索"
      size="large"
      @search="onSearch"
    >
      <a-icon slot="prefix" type="search" />
      <a-button slot="enterButton"> 搜索 </a-button>
    </a-input-search>
    <a-button
      v-if="searchList.length > 1"
      class="advanced-search-button"
      size="large"
      @click.stop="setShow(!show)"
    >
      <svg class="filter-icon" t="1646129905519" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2862"><path d="M568.553 954.182a86.342 86.342 0 0 1-41.426-10.473l-114.269-62.836a86.575 86.575 0 0 1-44.916-76.102V442.18a16.99 16.99 0 0 0-6.982-13.73L97.047 218.298l-3.956-3.49a85.876 85.876 0 0 1 62.836-144.99h711.215a86.575 86.575 0 0 1 63.767 144.99l-3.49 3.49-266.24 213.411a17.455 17.455 0 0 0-6.052 13.731v422.4a86.342 86.342 0 0 1-86.574 86.342z m-426.59-787.55l262.284 209.455a85.178 85.178 0 0 1 32.815 66.095V804.77a17.92 17.92 0 0 0 8.61 15.593l114.27 62.138a17.687 17.687 0 0 0 17.687 0 17.222 17.222 0 0 0 8.378-15.36V445.44a85.876 85.876 0 0 1 31.884-67.258l263.214-211.55a17.687 17.687 0 0 0 1.63-18.152 17.455 17.455 0 0 0-15.593-8.844H155.927a17.222 17.222 0 0 0-13.963 27.695zM920.67 512H731.695a34.444 34.444 0 0 1 0-69.818h188.974a34.444 34.444 0 0 1 0 69.818z m0 128.93H731.695a34.444 34.444 0 0 1 0-69.817h188.974a34.444 34.444 0 0 1 0 69.818z m0 128H731.695a34.444 34.444 0 0 1 0-69.817h188.974a34.444 34.444 0 0 1 0 69.818z" p-id="2863"></path></svg>
      <span class="button-label">高级搜索</span>
      <span v-if="activedNumber > 0" class="actived-number">
        {{ activedNumber }}
      </span>
      <svg class="show-icon" t="1646189413105" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2848"><path d="M907.1 299.9c-14.6-14.6-38.4-14.6-53 0L513 640.5 172 299.9c-14.6-14.6-38.4-14.6-53 0-14.6 14.6-14.6 38.4 0 53l364.7 364.2c0.8 1 1.7 2 2.7 3 7.3 7.3 17 11 26.7 10.9 9.7 0 19.3-3.6 26.7-10.9 1-1 1.8-1.9 2.7-3l364.7-364.2c14.4-14.6 14.4-38.4-0.1-53z" fill="" p-id="2849"></path></svg>
    </a-button>
    <div
      v-if="show"
      class="search-drawer-content"
      :class="{ 'size-change': renderSize }"
      :style="{ height: 'calc(' + drawerHeight + 'px + 0.12rem)' }"
    >
      <div class="search-draw-box">
        <div class="content-header">
          <div class="title">搜索条件</div>
          <div class="close-button" @click.stop="setShow(false)"></div>
        </div>
        <div class="search-content">
          <search-item
            v-for="(item, index) in searchList"
            :key="index + 3"
            :search="item"
            @onChange="onChange"
          ></search-item>
        </div>
        <app-button
          class="search-operation"
          :items="items"
          :parentEl="this"
        ></app-button>
      </div>
    </div>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>